<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单个上传插件</title>
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="css/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/assets/css/font-awesome.min.css" />

    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="css/assets/css/dropzone.css" />
    <!-- text fonts -->
    <link rel="stylesheet" href="css/assets/css/ace-fonts.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="css/assets/css/ace.min.css" id="main-ace-style" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="css/assets/css/ace-part2.min.css" />
    <![endif]-->
    <link rel="stylesheet" href="css/assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="css/assets/css/ace-rtl.min.css" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="css/assets/css/ace-ie.min.css" />
    <![endif]-->

    <!-- ace 设置处理程序 -->
    <script src="css/assets/js/ace-extra.min.js"></script>

    <!--[if lte IE 8]>
    <script src="css/assets/js/html5shiv.min.js"></script>
    <script src="css/assets/js/respond.min.js"></script>
    <![endif]-->
    <!--[if !IE]> -->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='css/assets/js/jquery.min.js'>"+"<"+"/script>");
    </script>
    <!-- <![endif]-->
    <!--[if IE]>
    <script type="text/javascript">
        window.jQuery || document.write("<script src='css/assets/js/jquery1x.min.js'>"+"<"+"/script>");
    </script>
    <![endif]-->

    <script src="css/assets/js/bootstrap.min.js"></script>

    <!-- page specific plugin scripts -->
    <script src="css/assets/js/dropzone.min.js"></script>
    <!-- ace scripts -->
    <script src="css/assets/js/ace-elements.min.js"></script>
    <script src="css/assets/js/ace.min.js"></script>

    <!-- inline scripts related to this page -->
    <script type="text/javascript">
        jQuery(function($){
            Dropzone.autoDiscover = false;
            try {
                var myDropzone = new Dropzone("#dropzone" , {
                    paramName: "file", // The name that will be used to transfer the file
                    maxFilesize: 0.5, // MB

                    addRemoveLinks : true,
                    dictDefaultMessage :
                            '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload \
                            <span class="smaller-80 grey">(or click)</span> <br /> \
                            <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>'
                    ,
                    dictResponseError: 'Error while uploading file!',

                    //change the previewTemplate to use Bootstrap progress bars
                    previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
                });
            } catch(e) {
                alert('Dropzone.js does not support older browsers!');
            }

        });
    </script>

</head>
<body class="no-skin" style="background: #fff;margin: 20px">
<div class="row">
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
        <div>
            <form action="../dummy.html" class="dropzone" id="dropzone">
                <div class="fallback">
                    <input name="file" type="file" multiple="" />
                </div>
            </form>
        </div><!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div>
</body>
</html>